<template>
  <el-dialog
    title="填写关注备注"
    :visible.sync="dialogVisible"
    width="400px"
    class="wifi-trans"
  >
    <el-input
      type="textarea"
      :rows="2"
      placeholder="输入备注"
      v-model="value"
    >
    </el-input>
    <ul class="select-lists">
      <li v-for="(item, index) in lists" :key="index" @click="setValue(item)">{{item}}</li>
    </ul>
    <span slot="footer" class="dialog-footer" style="text-align: center;">
      <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
      <el-button type="primary" @click="dialogVisible = false" size="mini"
        >确定</el-button
      >
      <el-button @click="dialogVisible = false" size="mini">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
let lists = ['停车超长', '拆除报警', '风险监控', '故障状况', '误报', '其他']

export default {
  data() {
    return {
      dialogVisible: false,
      checked: false,
      value: "",
      form: {
        clock: false,
        firstTime: "00:00"
      },
      lists
    };
  },

  methods: {
    show() {
      this.dialogVisible = !this.dialogVisible;
      this.value = ''
    },

    setValue(v) {
      v = this.value? `/${v}` : v
      this.value += v
    }
  }
};
</script>

<style lang="scss">
.wifi-trans {
  .el-dialog__header {
    background-color: #479de6 !important;

    .el-dialog__title,
    .el-dialog__close {
      color: #fff;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    text-align: center;
  }

  .select-lists {
    margin-top: 10px;

    li {
      display: inline-block;
      background: #eaeaea;
      padding: 5px;
      border-radius: 5px;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
    }
  }
}
</style>
